<template>
  <div>
    <!-- 搜索、查询 -->
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="学号">
          <el-input
            v-model="formInline.stuid"
            placeholder="学号"
            style="width: 100px"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            v-model="formInline.stuname"
            placeholder="姓名"
            style="width: 100px"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-input
            v-model="formInline.stuclass"
            placeholder="班级"
            style="width: 100px"
          ></el-input>
        </el-form-item>
        <el-form-item label="系别">
          <el-select
            v-model="formInline.studepart"
            placeholder="系别"
            style="width: 150px"
          >
            <el-option
              label="计算机工程学院"
              value="计算机工程学院"
            ></el-option>
            <el-option label="物联网学院" value="物联网学院"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <!-- 查询 -->
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <!-- 重置 -->
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 新增按钮和批量删除按钮 -->
    <div class="buttons">
      <!-- 新增、添加 -->
      <el-button
        type="primary"
        icon="el-icon-edit"
        class="btn btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#staticBackdrop"
        @click="dialogFormVisible1 = true"
        >新增、添加</el-button
      >
      <!-- 新增框 -->
      <el-dialog title="新增、添加" :visible.sync="dialogFormVisible1">
        <el-form :model="formadd">
          <el-form-item label="学号" :label-width="formLabelWidth">
            <el-input v-model="formadd.stuid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="formadd.stuname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="级别" :label-width="formLabelWidth">
            <el-select v-model="formadd.stulevel" placeholder="级别">
              <el-option label="专科" value="专科"></el-option>
              <el-option label="职高" value="职高"></el-option>
              <el-option label="本科" value="本科"></el-option>
              <el-option label="研究生" value="研究生"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级" :label-width="formLabelWidth">
            <el-select v-model="formadd.stuclass" placeholder="班级">
              <el-option label="23计3" value="23计3"></el-option>
              <el-option label="23计2" value="23计2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="系别" :label-width="formLabelWidth">
            <el-select v-model="formadd.studepart" placeholder="系别">
              <el-option
                label="计算机工程学院"
                value="计算机工程学院"
              ></el-option>
              <el-option label="物联网学院" value="物联网学院"></el-option>
              <el-option label="会计学院" value="会计学院"></el-option>
              <el-option label="金融学院." value="金融学院"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="formadd.stusex" placeholder="性别">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
          </el-form-item>
          <!-- 上传头像 -->
          <el-form-item label="头像" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              :action="baseUrl + '/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="formadd.stutoux"
                :src="baseUrl + '/' + formadd.stutoux"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="formadd.stuother" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!-- 新增框取消添加学生 -->
          <el-button @click="cancel">取 消</el-button>
          <!-- 新增框确认新增学生信息，确认新增 -->
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 批量删除 -->
      <el-button type="danger" icon="el-icon-delete" @click="batchStudents"
        >批量删除</el-button
      >
    </div>
    <!-- 学生列表 -->
    <div>
      <el-table
        ref="multipleTable"
        :data="stuList"
        height="800"
        border
        @selection-change="handleSelectionChange"
        style="width: 100%"
        slot="scope"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="stuid" label="学号" width="150">
        </el-table-column>
        <el-table-column prop="stuname" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="stulevel" label="级别" width="180">
        </el-table-column>
        <el-table-column prop="stuclass" label="班级" width="180">
        </el-table-column>
        <el-table-column prop="studepart" label="学院" width="180">
        </el-table-column>
        <el-table-column label="性别" width="130">
          <template slot-scope="scope">
            <div v-if="scope.row.stusex == 1">男</div>
            <div v-else>女</div>
          </template>
        </el-table-column>
        <el-table-column prop="stutoux" label="头像" width="170">
          <template slot-scope="scope">
            <img
              :src="baseUrl + '/' + scope.row.stutoux"
              style="
                width: 120px;
                height: 120px;
                border-radius: 70px;
                border: 1px solid #000;
              "
            />
          </template>
        </el-table-column>
        <el-table-column prop="stuother" label="备注" width="180">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <!-- 根据学生id删除 -->
            <el-button
              @click="delstudent(scope.$index, scope.row)"
              slot="reference"
              type="danger"
              icon="el-icon-delete"
              round
              >删除</el-button
            >
            <!-- 编辑修改 -->
            <el-button
              type="warning"
              icon="el-icon-edit"
              round
              @click="xianshi(scope.$index, scope.row)"
              >编辑</el-button
            >
            <!-- 编辑框 -->
            <el-dialog title="修改、编辑" :visible.sync="dialogFormVisible" append-to-body>
              <el-form :model="form">
                <el-form-item label="学号" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.stuid"
                    autocomplete="off"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
                <el-form-item label="名字" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.stuname"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="级别" :label-width="formLabelWidth">
                  <el-select v-model="form.stulevel" placeholder="请选择级别">
                    <el-option label="专科" value="专科"></el-option>
                    <el-option label="本科" value="本科"></el-option>
                    <el-option label="高职" value="高职"></el-option>
                    <el-option label="艺术" value="艺术"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="班级" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.stuclass"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="系别" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.studepart"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.stusex"
                    autocomplete="off"
                    :disabled="true"
                  >
                  </el-input>
                </el-form-item>
                <!-- 修改头像 -->
                <el-form-item label="头像" :label-width="formLabelWidth">
                  <el-upload
                    class="avatar-uploader"
                    :action="baseUrl + '/upload'"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess1"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img
                      v-if="form.stutoux"
                      :src="baseUrl + '/' + form.stutoux"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.stuother"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <!-- 编辑框取消修改 -->
                <el-button @click="cancel2()">取 消</el-button>
                <!-- 编辑框确认修改 -->
                <el-button
                  type="primary"
                  @click="update(scope.$index, scope.row)"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  // 获取学生表
  getStudents,
  // 查询学生
  searchStudent,
  // 添加学生
  addStudent,
  // 根据id删除单个学生
  deleteStudentById,
  // 批量删除学生
  delStudentByIds,
  // 修改学生信息
  updateStudent,
} from "@/api/student";
export default {
  name: "student",
  data() {
    return {
      // 学生信息数据
      stuList: [],
      //复选框
      multipleSelection: [],
      //查询
      formInline: {
        //查询时提交的参数
        stuid: "",
        stuname: "",
        studepart: "",
        stuclass: "",
      },
      //修改数据
      form: {
        stuid: "",
        stuname: "",
        stulevel: "",
        stuclass: "",
        studepart: "",
        stuother: "",
        stutoux: "",
      },
      //添加数据
      formadd: {
        stuid: "",
        stuname: "",
        stulevel: "",
        stuclass: "",
        studepart: "",
        stuother: "",
        stutoux: "",
      },
      dialogFormVisible1: false,
      dialogFormVisible: false,
      // 弹出框input的宽
      formLabelWidth: "120px",
      //上传头像
      imageUrl: "",
      baseUrl: this.$baseUrl,
    };
  },
  // 钩子函数
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      //获取表格
      getStudents().then((res) => {
        this.stuList = res.data;
      });
    },
    //搜索、查询学生信息
    onSubmit() {
      searchStudent(this.formInline).then((res) => {
        //访问后端的接口
        this.stuList = res.data;
        console.log(res);
      });
    },
    //重置页面
    reset() {
      location.reload();
    },
    //新增学生
    add() {
      addStudent(this.formadd).then((res) => {
        this.dialogFormVisible1 = false;
        this.getData(); // 重新获取数据
        location.reload();
      });
    },
    // 关闭新增框
    cancel() {
      this.dialogFormVisible1 = false;
    },
    //根据ID号删除
    delstudent(index, row) {
      // console.log(JSON.stringify(row));
      deleteStudentById(row.stuid).then((res) => {
        this.stuList.splice(index, 1);
      });
    },
    //批量删除学生
    batchStudents() {
      console.log(this.multipleSelection);
      delStudentByIds(this.multipleSelection).then((res) => {
        console.log(res);
        this.getData();
      });
    },
    //修改、编辑
    update(index, row) {
      updateStudent(this.form).then((res) => {
        this.dialogFormVisible = false;
        this.getData();
        location.reload();
      });
    },
    //编辑框获取内容
    xianshi(index, row) {
      this.dialogFormVisible = true;
      console.log(index, JSON.stringify(row));
      this.form = row;
      console.log(this.form);
    },
    //关闭编辑框
    cancel2() {
      this.dialogFormVisible = false;
      location.reload();
    },
    // 复选框
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 上传头像
    handleAvatarSuccess(res, file) {
      //上传成功之后的回调函数
      //this.imageUrl = URL.createObjectURL(file.raw);
      this.formadd.stutoux = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //修改头像
    handleAvatarSuccess1(res, file) {
      this.form.stutoux = res.data;
    },
    //
  },
};
</script>

<style>
/* hello，I love you */
/* 头像上传 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>